<template>
  <div class="app-container-detail">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="middle" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col v-if="msgType" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="middle" @click="handleComfig(true)">确认</el-button>
      </el-col>
      <el-col v-if="msgType" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="middle" @click="handleComfig()">拒绝</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div ref="mainCont" class="main-content">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>勘探点详情</span>
        </div>
        <div class="main-content-body">
          <div class="detail-item">
            <table class="detail-table" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <span class="labelTitle">勘探点编号</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.explorationCode }}</span>
                </td>
                <td>
                  <span class="labelTitle">勘探点类型</span>
                </td>
                <td>
                  <span v-if="formData.explorationType === '0'" class="infoText">钻探</span>
                  <span v-if="formData.explorationType === '1'" class="infoText">静探</span>
                </td>
                <td v-if="formData.blend">
                  <span class="labelTitle" v-html="`混&emsp;&emsp;合`" />
                </td>
                <td v-if="formData.blend">
                  <span class="infoText">{{ formData.blend }}</span>
                </td>
                <td v-if="formData.exploratoryWell">
                  <span class="labelTitle">探井</span>
                </td>
                <td v-if="formData.exploratoryWell">
                  <span class="infoText">{{ formData.exploratoryWell }}</span>
                </td>
                <td v-if="formData.drillHole">
                  <span class="labelTitle" v-html="`钻孔子类`" />
                </td>
                <td v-if="formData.drillHole">
                  <span class="infoText">{{ formData.drillHole }}</span>
                </td>
                <td>
                  <span class="labelTitle">项目地址</span>
                </td>
                <td :colspan="formData.explorationType === '1' ? '3' : ''">
                  <span class="infoText">{{ formData.address }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">所在区域</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ currentProvince }}</span>
                </td>
                <td>
                  <span class="labelTitle">坐标经度</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.x }}</span>
                </td>
                <td>
                  <span class="labelTitle">坐标纬度</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.y }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">勘探点高程</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.elevation }}</span>
                </td>
                <td>
                  <span class="labelTitle">开始时间</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.startTime }}</span>
                </td>
                <td>
                  <span class="labelTitle">结束时间</span>
                </td>
                <td colspan="5">
                  <span class="infoText">{{ formData.endTime }}</span>
                </td>
                <!-- <td>
                  <span class="labelTitle">初见水位</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.initialWaterLevel }}</span>
                </td>
                <td>
                  <span class="labelTitle">稳定水位</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.fixedLevel }}</span>
                </td> -->
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">设计深度</span>
                </td>
                <td colspan="6">
                  <span class="infoText">{{ formData.depth }}</span>
                </td>
              </tr>
            </table>
            <div class="two-level-title">勘探外业数据采集</div>
            <el-table class="table-list" stripe :data="tableData" border style="width: 100%">
              <el-table-column fixed="left" label="层序" type="index" width="55" align="center" />
              <el-table-column fixed="left" label="描述深度(m)" width="120" align="center">
                <el-table-column prop="outStartDepth" label="由" width="60" align="center" />
                <el-table-column prop="outEndDepth" label="至" width="60" align="center" />
              </el-table-column>
              <el-table-column label="地层描述" align="center">
                <el-table-column prop="soilName" label="土的名称" width="100" align="center" />
                <el-table-column prop="soilColor" label="颜色" width="80" align="center" />
                <el-table-column :show-overflow-tooltip="true" prop="otherProperties" label="其他性质" min-width="150" align="center" />
                <el-table-column prop="glossReaction" label="光泽反应" width="80" align="center" />
                <el-table-column prop="vibrationResponse" label="摇振反应" width="80" align="center" />
                <el-table-column prop="dryStrength" label="干强度" width="80" align="center" />
                <el-table-column prop="tenacity" label="韧性" width="80" align="center" />
              </el-table-column>
              <el-table-column prop="soilStatus" :formatter="formatSoilStatus" label="状态(粘性土)" width="120" align="center" />
              <el-table-column prop="humidity" :formatter="formatHumidity" label="湿度" width="80" align="center" />
              <el-table-column prop="density" :formatter="formatDensity" label="密度" width="80" align="center" />
              <el-table-column label="原位测试" align="center">
                <el-table-column prop="inSituCode" label="编号" width="80" align="center" />
                <el-table-column label="深度/m" width="60" align="center">
                  <!-- 字段冲突 endDpeth -->
                  <el-table-column prop="inSitStartDepth" label="由" width="60" align="center" />
                  <el-table-column prop="inSitEndDepth" label="至" width="60" align="center" />
                </el-table-column>
                <el-table-column prop="clubLength" label="杆长(m)" width="80" align="center" />
                <el-table-column prop="measuredNum" label="实测击数/10cm" width="120" align="center" />
              </el-table-column>
              <el-table-column label="照片/视频" width="120" align="center">
                <template slot-scope="{row,$index}">
                  <i class="el-icon-picture show-img" @click="showPicture(row.outSideId,$index)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <previewVideo ref="previewVideo" :img-id-list.sync="imgIdList" />
  </div>
</template>
<script>
/** 页面接口 start*/
import { getSysDicts } from '@/api/common/getSysDicts' // 查询字典类行中的数据
import { listByTreeProcessType } from '@/api/common/area.js'
import { getGoephyDetail, getOutSidePhone } from '@/api/projectManage/projectData/dataAcquisition'
import previewVideo from '@/components/basicinfo/previewVideo'
import { mapState } from 'vuex'
// 页面接口
import { getExplorationById } from '@/api/projectManage/project/exploration'
export default {
  components: {
    previewVideo
  },
  data() {
    return {
      imgIdList: [],
      // 消息提醒
      tableData: [], // 外业数据列表
      blend: [],
      drillHole: [],
      exploratoryWell: [],
      title: '', // 页面标题
      /* 表单 start*/
      currentProvince: '',
      cityOptions: [],
      formData: {
        boreholeType: '', // 钻孔类型
        proId: '',
        explorationCode: '', // 勘探点编号
        explorationType: '', // 勘察点类型
        x: '', // 坐标经度
        y: '', // 坐标纬度
        elevation: '', // 高程
        drillHole: '',
        currentProvince: '', // 所在区域
        nation: '', // 国家
        region: '', // 地区
        province: '', // 省
        city: '', // 市
        county: '', // 县
        exploratoryWell: '',
        blend: '',
        depth: '', // 勘探点深度
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        initialWaterLevel: '', // 初见水位
        fixedLevel: '', // 稳定水位
        useTime: '',
        explorationId: '' // 钻孔id
      },
      humidityList: [],
      densityList: [],
      soilStatusList: []
      /* 表单 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView
    })
  },
  mounted() {
    const { id } = this.$route.query
    this.getDetailById(id)
    this.getRegionTree()
    this.getOutside(id)
    this.getDictData()
  },
  methods: {
    formatHumidity(row) {
      return this.selectDictLabel(this.humidityList, row.humidity)
    },
    formatDensity(row) {
      return this.selectDictLabel(this.densityList, row.density)
    },
    formatSoilStatus(row) {
      return this.selectDictLabel(this.soilStatusList, row.soilStatus)
    },
    getDictData() {
      getSysDicts('sys_humidity').then(res => {
        this.humidityList = res.data.rows
      })
      getSysDicts('sys_density').then(res => {
        this.densityList = res.data.rows
      })
      getSysDicts('sys_soilStatus').then(res => {
        this.soilStatusList = res.data.rows
      })
    },
    // 图片展示
    showPicture(outSideId, index) {
      getOutSidePhone({ outSideId }).then(res => {
        this.imgIdList = res.data
        if (res.data[0]) {
          this.$nextTick(() => {
            this.$refs.previewVideo.previewBigImg()
          })
        } else {
          this.msgWarning('暂无照片')
        }
      })
    },
    // 获取区域树
    async getRegionTree() {
      const { data: { rows }} = await listByTreeProcessType({ regionCode: '' })
      this.cityOptions = this.deleteChildren(rows)
      this.getRegionCode()
    },
    // 根据地区编码回显地区
    getRegionCode() {
      const { formData: { province, city, county }} = this
      if (!county) return
      const region = this.cityOptions[0].children.find(item => {
        return item.children && item.children.some(city => city.value === province)
      })
      const sheng = region.children.find(sheng => sheng.value === province)
      const shi = sheng.children.find(shi => shi.value === city)
      const xian = shi.children.find(xian => xian.value === county)
      this.currentProvince = (region.label + sheng.label + shi.label + xian.label) || ''
    },
    // 顶部按钮
    // 获取详情
    getDetailById(id) {
      getExplorationById(id).then(res => {
        if (res) {
          this.formData = { ...res.data }
        }
      })
    },
    // 外业数据列表
    getOutside(id) {
      getGoephyDetail({ explorationId: id }).then(res => {
        if (res.data) {
          this.tableData = res.data
        }
      })
    },
    /* 选择项目负责人 end*/
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 0px;
}
.show-img {
  font-size: 20px;
  cursor: pointer;
}
</style>
